<template>
  <!-- 企业树弹窗 -->
  <div class="pagevue">
    <el-dialog title="" v-model="dialogRestore" width="550px" :close-on-click-modal="false" @close="cloeRestoreDialog">
      <template #header>
        <div>
          <svg-icon icon-class="file-close" style="margin-right: 5px"></svg-icon>
          <span>选择企业知识库</span>
        </div>
      </template>
      <div class="treeElClass">
        <el-tree
          ref="treeRestore"
          :data="treeRestoreList"
          :props="defaultProps"
          node-key="id"
          class="filter-tree"
          :lazy="true"
          :load="loadNode"
          :highlight-current="true"
          :default-expanded-keys="expandedKeys"
          :expand-on-click-node="false"
          @node-click="treeRestoreNodeClick"
        >
          <template #default="{ node, data }">
            <span @dblclick="treeRestoreDblclick(node, data)">
              <!-- <svg-icon :icon-class="node.expanded ? 'file-open' : 'file-close'"></svg-icon>
              <span>{{ node.label }}</span> -->
              <svg-icon :icon-class="selectSvgIcons(data)"></svg-icon>
              <span class="realName_class">{{ data.realName }}{{ data.suffix ? '.' + data.suffix : '' }}</span>
            </span>
          </template>
        </el-tree>
      </div>
      <div class="file_path">
        <el-divider direction="vertical" class="label_divider"></el-divider>
        <span> 路径：</span>
        <div class="file_path_class">{{ treeRestorePathObj.path.replace(/\//g, '\\') }}</div>
        <el-button type="text" @click="selectRootDirectory">选择根目录</el-button>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button @click="cloeRestoreDialog">取 消</el-button> -->
          <el-button type="primary" @click="SureDialogRestoreClick">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ApiTempFilesTree } from '@/api/personDoc/tempApi';

const dialogRestore = ref(false);
const defaultProps = ref({
  //树
  children: 'children',
  label: 'realName',
  isLeaf: 'leaf'
});
const treeRestoreList = ref([]);
const expandedKeys = ref([0]);
const treeRestorePathObj = ref({ path: '' });
const treeRestorePathObj_init = ref({ path: '' }); //保存初始化的树路径

const { proxy } = getCurrentInstance() as any;
const selectSvgIcons = (v) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};

//调用打开
const openDialog = (val) => {
  // console.log('🚀 ~ openDialog ~ val:', val.id);
  dialogRestore.value = true;
  getTreeList();
};

defineExpose({
  //调用组件需要导出 v-model的变量
  openDialog
});
// 获取树请求
const getTreeList = async () => {
  let res;
  res = await ApiTempFilesTree({ parentId: 1, sort: ['sort Asc', 'type Desc', 'create_time Desc'] });

  treeRestorePathObj.value = res.data;
  treeRestorePathObj_init.value = res.data;
  if (!res.data.path) {
    res.data.path = '/' + res.data.realName;
  }
  treeRestoreList.value = res.data.children;
  dialogRestore.value = true;
};
// 获取企业树
const loadNode = async (node, resolve) => {
  let res;
  if (node.level == 0) {
    return resolve(node.data);
  }

  res = await ApiTempFilesTree({ parentId: node.data.id, sort: ['sort Asc', 'type Desc', 'create_time Desc'] });
  console.log('🚀 ~ loadNode ~ res:', res);

  res.data.path = '/' + res.data.realName;
  let childrenArr = res.data.children;
  return resolve(childrenArr);
};
// 点击树节点
const treeRestoreNodeClick = async (data, node) => {
  treeRestorePathObj.value = data;
};

//选择根目录
const selectRootDirectory = () => {
  treeRestorePathObj.value = treeRestorePathObj_init.value;
};

// 关闭对话框
const cloeRestoreDialog = () => {
  dialogRestore.value = false;
  treeRestorePathObj.value = { path: '' };
};

// 双击
const treeRestoreDblclick = (node, data) => {
  treeRestorePathObj.value = data;
  SureDialogRestoreClick();
};

const emit: any = defineEmits(['EntSureClick']);
// 确定按钮
const SureDialogRestoreClick = () => {
  emit('EntSureClick', treeRestorePathObj.value);
  cloeRestoreDialog();
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 10px 20px;
}
.treeElClass {
  height: 300px;
  //   max-height: 30vh;
  overflow-y: auto;
  border: 1px solid #eee;
  margin-bottom: 15px;
}
.file_path {
  display: flex;
  align-items: center;
  .file_path_class {
    flex: 1;
    border-bottom: 1px solid #eee;
    margin-right: 6px;
  }
}
.label_divider {
  width: 3px;
  background-color: #409eff;
  margin: 0 4px;
  border-radius: 2px;
}
</style>
